<template>
  <div>
    我是about页面
    <!-- <p>{{ year }}</p> -->
    <hr />
    <ul>
      <li v-for="item  in userArr" :key="item.id">{{ item.name }}--{{ item.age }}</li>
    </ul>
  </div>
</template>

<script lang='ts' setup>
import { ref, type Ref } from 'vue';
// 使用ref时写法1:  使用ref 时, ts 会自动推导其类型,可以不要定义类型
// const year = ref(2000)
// // year.value = '2100'
// console.log(year);


// 使用ref 时的写法2: 当遇到ref 中的引用的数据类型为复杂得数据类型时,建议自定义的类型,不使用默认的类型推导了
interface itemType {
  id: number,
  name: string,
  age: number
}

// ts也会进行类型推导,所以可以赋值为空数组
const userArr: Ref<Array<itemType>> = ref([]);
userArr.value = [{ id: 1, name: '张三', age: 29 }, { id: 2, name: '张三', age: 29 }];
// console.log(userArr);

</script>
<style scoped>

</style>
